<template>
  <div class="source-drawer">
    <el-drawer
      ref="drawer"
      :visible="visible"
      @update:visible='cancel'
      :with-header="false"
      direction="rtl"
      size="40%"
      custom-class="demo-drawer"
    >
      <div class="demo-drawer__content">
        <div class="demo-drawer__content">
          <el-form
            ref="branchForm"
            :model="branchForm"
            :rules="rules"
            label-width="100px"
          >
            <el-row>
              <el-col :span="18">
                <el-form-item
                  label="节点名称"
                  prop="name"
                >
                  <el-input v-model="branchForm.name"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-divider></el-divider>
            <el-row
              v-for="(branch,index) in branchForm.branchList"
              :key="branch.id"
              :gutter="10"
              class="margin_b_24"
            >
              <el-col :span="14">
                <el-form-item
                  label="群组名称"
                  :prop="'branchList.'+index+'.user_groupCodes'"
                  :rules="branchGroupRules.user_groupCodes"
                >
                  <el-select
                    v-model="branch.user_groupCodes"
                    placeholder="请选择"
                    @change="
                    val => {
                      groupChange(val, index);
                      }
                     "
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-input
                  v-model="branch.name"
                  clearable=""
                ></el-input>
              </el-col>
              <el-col :span="4">
                <el-button
                  v-show="branchForm.branchList.length>2"
                  type="primary"
                  @click="deleteBranch(index)"
                >
                  删除分支
                </el-button>
              </el-col>
            </el-row>
            <el-row
              type="flex"
              justify="center"
            >
              <el-col :span="6">
                <el-button
                  v-show="branchForm.branchList.length<10"
                  type="primary"
                  class="add_branch"
                  @click="addBranch()"
                >
                  添加分支
                </el-button>
              </el-col>
            </el-row>
            <div class="demo-drawer__footer">
              <div class="demo-drawer__footer">
                <el-row
                  type="flex"
                  justify="center"
                >
                  <el-col :span="4">
                    <el-button @click="cancel">取 消</el-button>
                  </el-col>
                  <el-col :span="4">
                    <el-button
                      type="primary"
                      @click="save"
                    >确 定</el-button>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-form>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { commonMixin } from './common-mixin'
import { branchMixin } from './branch-mixin'
export default {
  mixins: [commonMixin, branchMixin],
  data() {
    return {
      options: [
        {
          value: "1",
          label: "群组1"
        },
        {
          value: "2",
          label: "群组2"
        },
        {
          value: "3",
          label: "群组3"
        },
        {
          value: "4",
          label: "群组4"
        }
      ],
      branchGroupRules: {
        user_groupCodes: [{ required: true, message: '请选择群组', trigger: 'change' }]
      }
    }
  },
  methods: {
    groupChange(val, index) {
      this.$set(this.branchForm.branchList[index], "name", val);
    }
  }
};
</script>
<style lang="scss" scoped>
.monthGroup {
  .el-checkbox {
    width: 50px;
  }
}
::v-deep {
  .el-drawer__body {
    overflow: scroll;
  }
  .el-divider--horizontal {
    margin: 0 0 24px;
  }
  .el-drawer__header {
    border-top: 1px solid #dce3e8;
    border-bottom: 1px solid #dce3e8;
    background: #f1f3f4;
    padding: 5px 10px;
    margin-bottom: 1rem;
    font-size: 18px;
  }
  .el-drawer {
    border-left: 1px solid rgb(220, 227, 232);
    background-color: rgb(251, 251, 251);
  }
  .demo-drawer__content {
    padding: 20px;
  }
}
</style>
